<template> 
  <div id="app">
    <div>
      英雄列表数据
      <ul>
        <li v-for="(item, i) in roles" :key="i">{{item}}</li>
      </ul>
    </div>
    <!-- 驼峰命名的组件在使用的时候建议使用连接符的形式 -->
    <!-- tab-card 表示app.vue的子组件 app.vue表示tab-card的父组件 -->
    <tab-card :tabs="arr" @tab="getTab"></tab-card>
    <tab-card></tab-card>
  </div>
</template>
<script>
// 导入要使用的组件 在单个vue文件中注册的组件叫局部组件
import tab from './components/tab'
export default {
  name: "helloApp",
  // components vue局部注册组件的方法
  components: {
    // tabCard 注册的组件名 相当于自定义了一个标签
    tabCard: tab
  },
  data() {
    return {
      arr: ['英雄联盟', '王者荣耀', '绝地求生', 'dnf'],
      maps: ['召唤师峡谷', '嚎哭深渊', '扭曲丛林'],

      lolRoles: ['小鱼人', '托儿所', '喜之郎'],
      wzRoles: ['韩信', '李白', '武则天'],
      roles: []
    }
  },
  methods: {
    getTab(tab) {
      // console.log(tab)
      switch(tab) {
        case '英雄联盟':
          this.roles = this.lolRoles
          break;
          case '王者荣耀':
            this.roles = this.wzRoles
            break;
      }
    }
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
